<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form5</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>
    全选：
  </p>
  <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
  <label for="checkbox">
    {{checked}}
  </label>
  <p>
    多个复选框：
  </p>
  <input type="checkbox" id="lz" value="Lz" v-model="checkedNames">
  <label for="lz">
    Lz
  </label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">
    Google
  </label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">
    Taobao
  </label>
  <br>
  <span>
    选择的值为:{{checkedNames}}
  </span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Lz", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})
</script>
</body>
</html>